<template>
	<view v-if="show" class="mask" @click="togglePopup" @touchmove.stop.prevent="stopPrevent"
		:style="{backgroundColor: backgroundColor}">
		<view class="image" v-if="data.type != 1">
			<image :src="data.imageUrl" :style="{width: data.imageWidth, height: data.imageHeight}" mode="scaleToFill"></image>
		</view>
		<view
			v-if="nativeShare"
			class="mask-content safe-bottom"
			@click.stop.prevent="stopPrevent"
			:style="[{
				height: 'auto',
				transform: transform
			}]">
			<view class="view-content">
				<view class="share-header">
					分享到
				</view>
				<view class="share-list">
					<!-- #ifdef MP-WEIXIN -->
					<button
						class="share-item no-border"
						open-type="share">
						<text :class="'icon xyicon xyicon-weixin'" :style="'color: #76AC52'"></text>
						<text class="title">微信好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view
						class="share-item"
						@click="shareToFriend({
							provider: 'local',
							icon: 'photo',
							color: '#4295D5',
							title: '保存相册'
						})">
						<text :class="'icon xyicon xyicon-photo'" :style="'color: #4295D5'"></text>
						<text class="title">保存相册</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view
						:key="index"
						v-for="(item,index) in shareList"
						class="share-item"
						@click="shareToFriend(item)"
						:open-type="item.scene == 'XSceneSession' ? 'share': ''">
						<text :class="'icon xyicon xyicon-' + item.icon" :style="'color: ' + item.color"></text>
						<text class="title">{{item.title}}</text>
					</view>
					<!-- #endif -->
					<!-- 网页只能提示长按保存图片或者复制文字 -->
					<!-- #ifdef H5 -->
					<view class="summary" v-if="data.type != 1">
						长按上方图片保存到相册
					</view>
					<view class="summary" v-else>
						点击复制文案
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="bottom b-t" @click="togglePopup">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'XyShare',
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				config: {},
				data: {},
				nativeShare: false
			};
		},
		props:{
			contentHeight:{
				type: Number,
				default: 0
			},
			// 是否是tabbar页面
			hasTabbar:{
				type: Boolean,
				default: false
			},
			shareList:{
				type: Array,
				default: function(){
					return [{
						    provider: 'weixin',
							scene: 'WXSceneSession',
							icon: 'weixin',
							color: '#76AC52',
							title: '微信好友'
						},
						{
							provider: 'weixin',
							scene: 'WXSenceTimeline',
							icon: 'wxpyq',
							color: '#E65F59',
							title: '朋友圈'
						},
						{
							provider: 'qq',
							scene: '',
							icon: 'qq',
							color: '#4295D5',
							title: 'QQ好友'
						},
						{
							provider: 'qq',
							scene: '',
							icon: 'qqzone',
							color: '#F1B845',
							title: 'QQ空间'
						},
						{
							provider: 'local',
							icon: 'photo',
							color: '#4295D5',
							title: '保存相册'
						},
						{
							provider: 'copy',
							icon: 'link',
							color: '#58A55C',
							title: '复制链接'
						},
						{
							provider: 'system',
							icon: 'more-o',
							color: '#5569E7',
							title: '更多'
						}
					];
				}
			}
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)',
			}
			this.transform = this.config.transform;
		},
		methods:{
			sendWithSystem(){
				let type = '';
				switch (this.data.type){
					case 0:
						type = 'web';
						break;
					case 1:
						type = 'text';
						break;
					case 2:
						type = 'image';
						break;
				}
				plus.share.sendWithSystem({
					type: type,
					title: this.data.title,
					content: this.data.summary,
					href: this.data.href,
					thumbs: [this.data.imageUrl],
					pictures: [this.data.imageUrl],
				}, this.data.success, this.data.fail);
			},
			togglePopup(data){
				if (data) {
					this.data = data;
					console.log(this.data);
				}

				//防止高频点击
				if(this.timer == 1){
					return;
				}
				this.timer = 1;
				setTimeout(()=>{
					this.timer = 0;
				}, 500)
				if(this.show){
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(()=>{
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200)
					return;
				}
				// 启用系统分享，这样就不用去申请各种appid了。
				// #ifdef APP-PLUS
				if (this.data.systemShare) {
					this.show = true;
					this.sendWithSystem();
					return true;
				}
				// #endif
				this.show = true;
				this.nativeShare = true;
				//等待mask重绘完成执行
				if (this.hasTabbar) {
					uni.hideTabBar({
						success: () => {
							setTimeout(()=>{
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10)
						}
					});
				} else {
					setTimeout(()=>{
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10)
				}
			},
			//防止冒泡和滚动穿透
			stopPrevent(){},
			//分享操作
			shareToFriend(item){
				switch (item.provider){
					case 'local':
						console.log('保存图片到相册');
						// 保存图片到相册
						uni.saveImageToPhotosAlbum({
							filePath: this.data.imageUrl,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 1000
								});
							}
						});
						break;
					case 'copy':
						// 拷贝链接
						break;
					case 'system':
						// 调用系统分享
						this.sendWithSystem();
						return true;
						break;
					default:
						// #ifdef APP-PLUS
						uni.share({
							provider: item.provider,
							scene: item.scene,
							type: this.data.type,
							href: this.data.href,
							title: this.data.title,
							summary: this.data.summary,
							imageUrl: this.data.imageUrl,
							success: this.data.success,
							fail: this.data.fail
						});
						// #endif
						break;
				}
				// this.togglePopup(); // 自动关闭
			},
		}
	}
</script>

<style lang='scss'>
	.mask{
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display:flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		z-index: 998;
		transition: .3s;
		.image {
			position:absolute;
			top: 20px;
			box-shadow: 0 0 10px rgba(0,0,0,.1);
		}
		.bottom {
			position:absolute;
			left: 0;
			bottom: 0;
			display:flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90upx;
			background: #fff;
			z-index: 9;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}
	}
	.mask-content{
		width: 100%;
		height: auto;
		transition: .3s;
		background: #fff;
		&.has-bottom{
			padding-bottom: 90upx;
		}
		.view-content{
			height: 100%;
		}
	}
	.share-header{
		height: 50upx;
		font-size: $font-base+2upx;
		color: font-color-dark;
		display:flex;
		align-items:center;
		justify-content: center;
		padding-top: 10upx;
		&:before, &:after{
			content: '';
			width: 240upx;
			heighg: 0;
			border-top: 1px solid $border-color-base;
			transform: scaleY(.5);
			margin-right: 30upx;
		}
		 &:after{
			 margin-left: 30upx;
			 margin-right: 0;
		 }
	}
	.share-list {
		display:flex;
		flex-wrap: wrap;
		margin-bottom: 60px;
		justify-content: left;
		.summary {
			width: 100%;
			padding: 0px 30px;
			text-align: center;
			textarea {
				padding: 5px;
				min-height: 60px;
				border: 1px solid #f1f1f1;
				margin-bottom: 10px;
			}
		}
		.share-item {
			min-width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 150upx;
			background: none;
			line-height: 1;
			margin: 0;
			.icon {
				font-size: 70upx;
				width: 70upx;
				height: 70upx;
				margin-bottom: 26upx;
			}
			.title {
				font-size: $font-base;
				color: $font-color-base;
			}
		}
	}
</style>
